<template>
    <div class="customer kpi-content-wrapper">
        <div class="kpi-select-wrapper"> <!-- 组织下拉框 -->
            <el-select v-model="curOrg" placeholder="请选择组织" size="small" class="kpi-select">
                <el-option v-for="option in orgOptions" :label="option.name" :value="option.id" :key="option.id"></el-option>
            </el-select>
            <el-radio-group v-model="curDateType" size="small" class="customer-radio-group" @change="chageDateType" style="float: right;">
                <el-radio-button label="day">本日</el-radio-button>
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
            </el-radio-group>
        </div>
        <div class="customer-center-box"> <!--中间的数据和图表区域-->
            <div class="big-img">
                <h2>{{currentData.newOrderNum}}</h2>
                <p>本{{currentData.title}}新增工单(个)</p>
                <span>上{{currentData.title}}工单({{currentData.lastOrderNum}})</span>
            </div>
            <ul class="grid-data--box">
                <li>
                    <img :src="snbx" />
                    <div class="data-item">
                        <h4>{{currentData.snbx}}</h4>
                        <p>室内报修(个)</p>
                    </div>
                </li>
                <li>
                    <img :src="gqbx" />
                    <div class="data-item">
                        <h4>{{currentData.gqbx}}</h4>
                        <p>公区报修(个)</p>
                    </div>
                </li>
                <li>
                    <img :src="qtbx" />
                    <div class="data-item">
                        <h4>{{currentData.qtbx}}</h4>
                        <p>其它报修(个)</p>
                    </div>
                </li>
                <li>
                    <img :src="tsjy" />
                    <div class="data-item">
                        <h4>{{currentData.tsjy}}</h4>
                        <p>投诉建议(个)</p>
                    </div>
                </li>
            </ul>
            <div class="customer-chart-box"> <!-- 右侧仪表盘 -->
                <yibiao-chart />
            </div>
            <div class="customer-satisfaction-info"> <!-- 满意度信息-做在echarts中不是很方便，就用一个div来承载 -->
                <div class="iconheart-box"><span class="icon iconfont iconheart-fill"></span></div>
                <span class="satisfaction-rate">68.89%</span>
                <span class="satisfaction-tit">满意度</span>
                <div class="rate-trend">
                    周趋势<div class="color-wrapper"><span class="icon iconfont iconzengchang"></span></div>
                </div> <!-- 满意度的趋势 -->
            </div>
        </div>
        <div class="customer-bottom-box"> <!-- 底部的待办事项 -->
            <h3>待办事项({{currentData.title}})</h3>
            <ul class="list-data-ul">
                <li>
                    <img :src="dfp" />
                    <div class="data-item">
                        <h4 style="color: #155ac3;">{{currentData.dfp}}</h4>
                        <p>待分派工单</p>
                    </div>
                </li>
                <li>
                    <img :src="dfk" />
                    <div class="data-item">
                        <h4 style="color: #455bed;">{{currentData.dfk}}</h4>
                        <p>待反馈工单</p>
                    </div>
                </li>
                <li>
                    <img :src="dqr" />
                    <div class="data-item">
                        <h4 style="color: #019faf;">{{currentData.dqr}}</h4>
                        <p>待确认完成工单</p>
                    </div>
                </li>
                <li>
                    <img :src="dhf" />
                    <div class="data-item">
                        <h4 style="color: #f66677;">{{currentData.dhf}}</h4>
                        <p>待回访工单</p>
                    </div>
                </li>
                <li>
                    <img :src="dgb" />
                    <div class="data-item">
                        <h4 style="color: #027aff;">{{currentData.dgb}}</h4>
                        <p>待关闭工单</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import yibiaoChart from './child/yibiaoChart';
    const snbx = require('./imgs/snbx.png'); // 室内报修图标
    const gqbx = require('./imgs/gqbx.png'); // 公区报修图标
    const qtbx = require('./imgs/qtbx.png'); // 其它报修图标
    const tsjy = require('./imgs/tsjy.png'); // 投诉建议图标

    const dfp = require('./imgs/dfp.png'); // 待分派
    const dfk = require('./imgs/dfk.png'); // 待反馈
    const dqr = require('./imgs/dqr.png'); // 待确认
    const dhf = require('./imgs/dhf.png'); // 待确认
    const dgb = require('./imgs/dgb.png'); // 待确认

    export default {
        name: 'customer',
        components: {
            yibiaoChart
        },   
        data() {
            return {
                snbx,
                gqbx,
                qtbx,
                tsjy,
                dfp,
                dfk,
                dqr,
                dhf,
                dgb,
                curOrg: '',
                orgOptions: [], // 机构列表
                curDateType: 'week', // 当前日期类型
                currentData: {
                    title: '周',
                    newOrderNum: 2587, // 新增
                    lastOrderNum: 1655, // 上次的工单数
                    snbx: 529, // 室内报修
                    gqbx: 498, // 工区报修
                    qtbx: 629, // 其它报修
                    tsjy: 128, // 投诉建议
                    dfp: 629, // 待分派工单
                    dfk: 80, // 待反馈工单
                    dqr: 60, // 待确认完成工单
                    dhf: 43, // 待回访
                    dgb: 2 // 待关闭
                }
            }
        },
        mounted() {
            this.getOrgOptions();
        },
        methods: {
            getOrgOptions() {
                this.orgOptions = [
                    { id: '5801', name: '天苑花园' },
                    { id: '583', name: '银河世纪集团' }
                ];
            },
            chageDateType() {                
                this.loadDateTypeData();
            },
            loadDateTypeData() {
                let type = this.curDateType;
                let dateTypes = { day: '日', week: '周', month: '月'};
                let title = dateTypes[type] || '周';
                this.currentData.title = title;
            }
        }
    }
</script>

<style lang="scss">
.customer {
    .kpi-select-wrapper { // 上面的select部分
        margin-bottom: 28px;
    }
    .customer-center-box {
        height: 252px;
        margin-bottom: 31px;
        display: flex;
        .big-img {
            width: 238px;
            height: 100%;
            margin-right: 16px;
            background: url(./imgs/kf-bg.png) no-repeat;
            box-shadow: 0px 4px 6px 2px rgba(199,173,173,0.08);
            color: #fff;
            text-align: center;
            h2 {
                margin-top: 40px;
                margin-bottom: 0;
                height: 48px;
                line-height: 48px;
                font-size: 40px;
                font-weight: 700;
                letter-spacing: 2px;
                text-align: center;
            }
            p {
                line-height: 20px;
                color: rgba(255,255,255,0.85);
            }
            span {
                display: block;
                margin:  24px auto 0;
                width: 128px;
                height: 32px;
                line-height: 32px;
                color: #027aff;
                background: #eff6fe;
                border-radius: 21px;
            }
        }
        .grid-data--box {
            display: flex;
            flex-wrap: wrap;
            width: 492px;
            li {
                width: 242px;
                height: 122px;
                margin: 0 8px 8px 0;
                background: #f7f8fa;
                border-radius: 2px;
                box-shadow: 0px 4px 6px 2px rgba(199,173,173,0.08);
                display: flex;
                align-items: center;
                padding: 33px 24px;
                box-sizing: border-box;
                &:nth-child(2n) {
                    margin-right: 0;
                }
                &:nth-last-child(-n + 2) { // 后两个元素的margin-bottom: 0;
                    margin-bottom: 0;
                }
                img {
                    margin-right: 16px;
                    user-select: none;
                }
                h4 {
                    height: 28px;
                    line-height: 28px;
                    font-size: 20px;
                    font-weight: 700;
                    color: #051b33;                    
                }
                p {
                    height: 22px;
                    line-height: 22px;
                    color: rgba(0,0,0,0.65);
                }
            }
        }
        .customer-chart-box {
            flex: 1;
            .yibiao-chart-box {
                width: 100%;
                height: 100%;
                .yibiao-chart-container {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .customer-satisfaction-info {
            width: 200px;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            .iconheart-box { // 心型图标
                width: 40px;
                height: 40px;
                background-color: #00adbe;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                span {
                    color: #fff;
                    font-size: 20px;
                    transition: all .3s;
                }
                &:hover {
                    span {
                        font-size: 24px;
                    }
                }
            }
            .satisfaction-rate {
                margin: 0 10px;
                font-size: 24px;
                color: #051b33;
                font-weight: 700;
            }
            .satisfaction-tit {
                color: rgba(0,0,0,0.65);
            }
            .rate-trend {
                position: absolute;
                right: 0;
                top: 10px;
                display: flex;
                color: rgba(0,0,0,0.65);
                align-items: center;
                .color-wrapper {
                    background-color: #00adbe;
                    border-radius: 2px;
                    width: 16px;
                    text-align: center;
                    margin-left: 5px;
                    span {
                        font-size: 12px;
                        color: #fff;
                    }
                }
            }
        }
    }
    .customer-bottom-box {
        h3 {
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #d9d9d9;
            color: rgba(0,0,0,.85);
            font-size: 14px;
            font-weight: normal;
        }
        .list-data-ul {
            display: flex;
            li {
                flex: 1;
                display: flex;
                align-items: center;
                padding: 27px 24px;
                box-sizing: border-box;
                img {
                    margin-right: 20px;
                    user-select: none;
                }
                h4 {
                    height: 28px;
                    line-height: 28px;
                    font-size: 20px;
                    font-weight: 700;
                    color: #155ac3;                   
                }
                p {
                    height: 22px;
                    line-height: 22px;
                    color: rgba(0,0,0,0.65);
                }
            }
        }
    }
}
</style>